<template>
	<view>
		<view class="discount-container">
			<view class="discount-item" v-for="(item, index) in discountList" :key="item.id">
				<view class="item-left">{{ item.title }}</view>
				<view class="item-right">
					<view class="item-right-top">
						<view class="top-left">{{ item.is_code }}</view>
						<view class="top-right">{{ item.top_right }}</view>
					</view>
					<view class="item-right-center">
						<view class="center">{{ item.info }}</view>
					</view>
					<view class="item-right-bottom">
						<view class="bottom-left">{{ item.bottom_left }}</view>
						<view :class="[item.is_have === 2 ? 'bottom-right' : 'bottom-right-have']"
							@click="getDiscount(item.is_have, index)">{{ item.is_have === 1 ? ishave : nohave}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="getMore">
			<text class="getMore-text" @click="toDiscountCenter">
				领更多好券>
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ishave: '去使用',
				nohave: '立即领取',
				discountList: []
			}
		},
		onLoad() {
			this.getDiscountList();
		},
		methods: {
			toDiscountCenter() {
				uni.navigateTo({
					url: '/pagesA/my/discount/discountCenter/discountCenter'
				})
			},
			getDiscountList() {
				uni.$http.post('/Wechat/Activity/getActivity')
					.then(res => {
						if (res.statusCode === 500) {
							uni.removeStorageSync("tel");
							uni.removeStorageSync("token");
							uni.removeStorageSync("userInfo");
							uni.$showMsg('当前登录信息过期');
							setTimeout(() => {
								uni.switchTab({
									url: "/pages/my/my",
								})
							}, 2000)
						} else {
							this.discountList = res.data.data.filter(i => {
								return i.is_have === 2
							})
							this.discountList.forEach(i => {
								if (i.is_code === 1) {
									i.is_code = '首月租金券'
								} else if (i.is_code === 2) {
									i.is_code = '固定折扣券'
								} else {
									i.is_code = '平台满减券'
								}
							})
						}
					})
			},
			getDiscount(have, index) {
				if (have !== 1) {
					uni.$showMsg("领取成功", 1500);
					this.discountList.splice(index, 1)
				} else {
					uni.navigateTo({
						url: '/pagesA/my/discount/gotoUse/gotoUse'
					})
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.discount-container {
		padding: 0 20rpx;

		.discount-item {
			display: flex;
			width: 100%;
			height: 220rpx;
			margin-top: 30rpx;
			box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.15);

			.item-left {
				background-color: red;
				color: #fff;
				width: 30%;
				border: 2rpx solid red;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				font-weight: bold;
				border-top-left-radius: 20rpx;
				border-bottom-left-radius: 20rpx;
			}

			.item-right {
				background-color: #fff;
				width: 70%;
				display: flex;
				font-size: 25rpx;
				flex-direction: column;
				justify-content: space-around;
				align-items: stretch;
				padding: 20rpx;

				.item-right-top {
					display: flex;
					padding: 5rpx;
				}

				.item-right-bottom {
					display: flex;
					justify-content: space-between;
				}

			}

		}
	}


	.top-left {
		font-size: 20rpx;
		color: #fff;
		background-color: red;
		border-radius: 4rpx;
		padding: 5rpx 10rpx;
	}

	.bottom-right {
		background-color: red;
		color: #fff;
		border-radius: 8rpx;
		padding: 8rpx 15rpx;
	}


	.bottom-right-have {
		background-color: #fff;
		color: red;
		border: 1px solid red;
		border-radius: 20rpx;
		padding: 8rpx;
	}

	.getMore {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 999;
		text-align: center;
	}

	.getMore-text {
		margin: 0 auto;
		color: #e8c513;
		line-height: 4rem;
	}
</style>